import { Card, Avatar, Tag } from 'antd';


export function HeaderCard({ schoolData }) {
  let tableData = [];
  if (schoolData !== undefined) {
    tableData = [
      { attr: '创建时间', value: schoolData.create_year },
      { attr: '办学性质', value: schoolData.is_gov ? "公办" : "民办" },
      { attr: '院校所在地', value: schoolData.prov_short === schoolData.city_short ? schoolData.prov_short : `${schoolData.prov_short} ${schoolData.city_short}` },
      { attr: '隶属于', value: schoolData.attach },
      { attr: '学科层次', value: schoolData.batch },
      { attr: '院校类型', value: schoolData.school_type },
      { attr: '博士点', value: schoolData.num_doctor },
      { attr: '硕士点', value: schoolData.num_master },
      { attr: '重点学科', value: schoolData.num_imp_pro },
      { attr: '学生人数', value: schoolData.num_stu },
      { attr: '院士人数', value: schoolData.num_acade },
    ];
  }
  const { Meta } = Card;
  return (
    <Card className='border-none shadow-inner'>
      <Meta
        avatar={<Avatar src={schoolData.logo_url} size={{ xs: 120, sm: 160, md: 160, lg: 160, xl: 160, xxl: 160 }} />}
        description={
          <div className='text-black md:ml-8 md:mt-4'>
            <h1 className='text-3xl font-bold'>{schoolData.school}</h1>
            <div className="whitespace-nowrap overflow-hidden overflow-ellipsis mt-4">
              {schoolData.is_985 === 1 && <Tag>985</Tag>}
              {schoolData.is_211 === 1 && <Tag>211</Tag>}
              {schoolData.is_dfc === 1 && <Tag>双一流</Tag>}
              {schoolData.is_imp_country === 1 && <Tag>国重点</Tag>}
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-5 lg:gap-4 items-start lg:items-center">
              <div className="py-2">
                <div className="flex overflow-hidden">
                  <a className="text-blue-400 break-all" href={schoolData.official_web}>{schoolData.official_web}</a>
                </div>
              </div>
              <div className="lg:p-2">
                <div className="flex overflow-hidden">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                  </svg>
                  <p className="ml-1">{schoolData.tel}</p>
                </div>
              </div>
            </div>
          </div>
        }
      />
      <div className="p-4">
        <div className="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-11 gap-2  divide-gray-200">
          {tableData.map((item, index) => (
            <div key={index} className="p-2 text-center border-[1px] md:border-0">
              <div className="font-bold truncate text-lg" >{item.value}</div>
              <div className='text-base whitespace-nowrap'> {item.attr}</div>
            </div>
          ))}
        </div>
      </div>
    </Card>
  )
}
